<template>
  <div class="file-edit-container">
    <div class="file-preview">
      <div class="image-placeholder">
        <span class="alt-text">文件预览</span>
      </div>
    </div>
    <div class="version-selector">
      <span>请选择版本</span>
      <select id="version" v-model="selectedVersion">
        <option v-for="version in versions" :key="version" :value="version">{{ version }}</option>
      </select>
    </div>
    <div class="button-container">
      <button class="select-version-btn" @click="selectVersion">请选版本</button>
      <button class="reupload-btn" @click="reuploadFile">重传文件</button>
      <button class="save-btn" @click="showSaveConfirmation">保存</button>
    </div>
    <UploadFile v-if="isUploadModalVisible" @close="handleUploadClose" />
    <!-- 确认保存的弹窗 -->
    <div v-if="isSaveConfirmationVisible" class="save-confirmation-modal">
      <div class="modal-content">
        <p>是否确认保存？</p>
        <div class="modal-buttons">
          <button class="cancel-btn" @click="hideSaveConfirmation">取消</button>
          <button class="confirm-save-btn" @click="handleSaveConfirmation">保存</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import UploadFile from '@/components/UploadFile.vue';

export default {
  components: {
    UploadFile
  },
  data() {
    return {
      isUploadModalVisible: false,
      selectedVersion: 'v1.0',
      versions: ['v1.0', 'v1.1', 'v2.0'],
      isSaveConfirmationVisible: false // 控制确认保存弹窗的显示和隐藏
    };
  },
  methods: {
    selectVersion() {
      console.log('执行选择版本操作');
    },
    reuploadFile() {
      console.log('执行上传文件操作');
      this.isUploadModalVisible = true;
    },
    showSaveConfirmation() {
      // 显示确认保存的弹窗
      this.isSaveConfirmationVisible = true;
    },
    hideSaveConfirmation() {
      // 隐藏确认保存的弹窗
      this.isSaveConfirmationVisible = false;
    },
    handleSaveConfirmation() {
      // 处理保存确认，这里可以添加实际的保存逻辑
      console.log('执行保存操作');
      this.hideSaveConfirmation();
    },
    saveFile() {
      console.log('执行保存文件操作');
    },
    handleUploadClose() {
      this.isUploadModalVisible = false;
    }
  },
  mounted() {
    this.isUploadModalVisible = false;
    console.log(UploadFile);
  }
};
</script>

<style scoped>
.file-edit-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to bottom right, #f0f9ff, #cbebff);
  padding: 20px;
  text-align: center;
}

.file-preview {
  width: 100%;
  max-width: 600px;
  margin-bottom: 20px;
}

.image-placeholder {
  position: relative;
}

.alt-text {
  font-size: 20px;
  font-weight: bold;
  color: #000;
}

.version-selector {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.version-selector span {
  margin-right: 10px;
}

.button-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.select-version-btn,
.reupload-btn,
.save-btn {
  padding: 16px 32px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  font-size: 18px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.select-version-btn {
  background-color: #ecf5ff;
  color: #409eff;
}

.select-version-btn:hover {
  background-color: #e6f2ff;
}

.reupload-btn,
.save-btn {
  background-color: #409eff;
  color: white;
}

.reupload-btn:hover,
.save-btn:hover {
  background-color: #66b1ff;
}

/* 确认保存弹窗的样式 */
.save-confirmation-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.modal-content p {
  margin-bottom: 15px;
  text-align: center;
}

.modal-buttons {
  display: flex;
  justify-content: space-between;
}

.cancel-btn,
.confirm-save-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.3s;
}

.cancel-btn {
  background-color: #f0f0f0;
  color: #333;
}

.cancel-btn:hover {
  background-color: #e0e0e0;
}

.confirm-save-btn {
  background-color: #409eff;
  color: white;
}

.confirm-save-btn:hover {
  background-color: #66b1ff;
}
</style>